<template>
  <div>
    <Card class="card clear-float">
      <p class="card-title" slot="title">{{$t('cfL_Gimndhy_IlOj2kOoo')}}</p>
      <div class="operate-area">
        <!-- <div class="inline-item search-item">
          <Input v-model="customName" @on-enter="searchTable">
            <span slot="prepend">{{$t('xz5AFl8ygS2V-v13rJdPJ')}}</span>
            <Button slot="append" icon="ios-search" @click="searchTable"></Button>
          </Input>
        </div>
        <div class="inline-item search-item">
          <Input v-model="customNumber" @on-enter="searchTable">
            <span slot="prepend">{{$t('XdKa-k_31FS_B6I09lxdk')}}</span>
            <Button slot="append" icon="ios-search" @click="searchTable"></Button>
          </Input>
        </div> -->
        <div class="inline-item btn-item">
          <Button type="primary" icon="md-add" @click="addCustomer"
            >{{$t('CUkVT9j2Y6w3Sgzk1ZtnF')}}</Button
          >
        </div>
        <!-- <div class="inline-item btn-item">
          <Button type="primary" icon="md-add" @click="icCardManager"
            >{{$t('MsHCoyIPokcy60Pbzf_N0')}}</Button
          >
        </div> -->
        <!-- <div class="inline-item btn-item">
          <Button type="info" icon="md-add" @click="vipSetting"
            >{{$t('7xpLZr4gJe_1iH3U0EllU')}}</Button
          >
        </div> -->
      </div>
      <Table
        highlight-row
        :loading="loading"
        :columns="columns"
        :data="data"
        @on-current-change="selectionChangeHandler"
      >
        <template slot-scope="{ row }" slot="enablemultuse">
          <span :class="['ivu-btn-ghost br-bold', row.enablemultuse == 1 ? 'ivu-btn-success' : 'ivu-btn-error' ]">{{ row.enablemultuse == 1 ? '√' : '×' }}</span>
        </template>
      </Table>
      <Modal
        v-model="formModal"
        :title="formTitle"
        footer-hide
        :mask-closable="false"
      >
        <form-info
          :status="status"
          :data="formData"
          @success="success"
          @fail="fail"
          @close="close"
        />
      </Modal>
    </Card>
  </div>
</template>

<script>
import { getCustomerList, getCustomerInfo, deleteCustomer } from '@/api/data2'
import FormInfo from './components/customForm'
export default {
  name: 'custom_info',
  components: {
    FormInfo
  },
  data () {
    return {
      formModal: false,
      status: 'new',
      customName: '',
      customNumber: '',
      loading: false,
      columns: [
        {
          title: this.$t('NNqwsiYKNFh8WR5Mvlwed'),
          key: 'stationName',
          width: 200
        },
        {
          title: this.$t('xz5AFl8ygS2V-v13rJdPJ'),
          key: 'name',
          width: 100
        },
        // {
        //   title: this.$t('IYWr-F7QS9qsybwZnlgNc'),
        //   key: 'id',
        //   width: 100
        // },
        {
          title: this.$t('4wFt6b12AOS1v2rs7C92e'),
          key: 'tel',
          width: 150
        },
        {
          title: this.$t('FDVxJH8SR_vtTvfu8Ruye'),
          key: 'cardidmultusecount',
          width: 150
        },
        {
          title: this.$t('EgNUmuiLDgBDM2rcvUsOK'),
          slot: 'enablemultuse',
          width: 150
        },
        {
          title: this.$t('ude6YP0z60dYe5BVBevuj') + '(%)',
          key: 'vipdiscount',
          width: 150
        },
        {
          title: this.$t('R50mHX0LambJk39x8cmq6'),
          key: 'memo',
          width: 150
        },
        {
          title: this.$t('Ty1ns2epHIaihi82jwUfc'),
          fixed: 'right',
          width: 250,
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small',
                  icon: 'ios-settings'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.icCardManager(params.index)
                  }
                }
              }, this.$t('MsHCoyIPokcy60Pbzf_N0')),
              h(
                'Button',
                {
                  props: {
                    type: 'warning',
                    size: 'small',
                    icon: 'ios-create'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.editItem(params.index)
                    }
                  }
                },
                this.$t('3cH_U2GeBUW1V74W8oDNv')
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small',
                    icon: 'ios-create'
                  },
                  on: {
                    click: () => {
                      this.deleteItem(params.index)
                    }
                  }
                },
                this.$t('hND4KLgCabT6swtTJBIUf')
              )
            ])
          }
        }
      ],
      data: [],
      formData: {},
      selection: null
    }
  },
  created () {
    this.queryTable()
  },
  computed: {
    formTitle () {
      return (this.status === 'new' ? this.$t('N8xdbBoV-d6Vc33tKrGGm') : this.$t('3cH_U2GeBUW1V74W8oDNv')) + this.$t('JdDXfZVOkjyVh0nsSxNdx')
    }
  },
  methods: {
    selectionChangeHandler (selection) {
      // console.log(selection)
      // this.setSelections([selection])
      this.selection = selection
    },
    addCustomer () {
      this.formData = {
        id: '',
        stationid: +this.$store.state.user.stationId,
        name: '',
        tel: '',
        cardidmultusecount: '1',
        enablemultuse: '1',
        vipdiscount: '100',
        memo: '',
        enablestationlist: [+this.$store.state.user.stationId]
      }
      this.status = 'new'
      this.formModal = true
    },
    icCardManager (index) {
      const selection = this.data[index]
      if (selection) {
        this.$router.push({
          name: 'ic_card_list',
          params: { customId: selection.id + '' }
        })
      } else {
        this.$Message.warning(this.$t('HLOca8VaR1VQN5RrGx9Zn'))
      }
    },
    vipSetting () {

    },
    icQuery (index) {
      const cus = this.data[index]
      this.setCustom(cus)
    },
    vipQuery () {

    },
    searchTable () {
      this.queryTable()
    },
    async queryTable ({ customName = this.customName, customNumber = this.customNumber } = {}) {
      this.loading = true
      const { code, data, desc } = await getCustomerList({
        customName,
        customNumber,
        stationid: +this.$store.state.user.stationId
      })
      if (code == 200) {
        const datalist = data.datalist || []
        datalist.forEach(d => {
          d.stationName = this.$store.state.user.userName
        })
        this.data = datalist
      } else {
        this.$Message.error(desc)
      }
      this.loading = false
    },
    editItem (index) {
      const item = this.data[index]
      this.formData = {
        ...item,
        cardidmultusecount: item.cardidmultusecount + '',
        enablemultuse: item.enablemultuse + '',
        vipdiscount: item.vipdiscount + ''
      }
      this.status = 'edit'
      this.editIndex = index
      this.formModal = true
    },
    deleteItem (index) {
      this.$Modal.confirm({
        title: this.$t('oiW2WYZoyJSt3j7yCy10e'),
        content: this.$t('KePcPzUJR7hEB6lp4nEtV'),
        onOk: async () => {
          // this.data.splice(index, 1)
          const { code, desc } = await deleteCustomer({
            name: this.data[index].name
          })
          if (code == 200) {
            this.$Message.success(this.$t('hWGIgDqZtmSWFd9gU3Ya7'))
            this.queryTable()
          } else {
            this.$Message.error(desc)
          }
        }
      })
    },
    success (desc) {
      if (this.status === 'new') {
        this.$Message.success(desc || this.$t('38AWpi9C1Z7eLtpj1TEfD'))
      } else {
        this.$Message.success(desc || this.$t('qDM1Ic0NDNp4weHsjQ4sN'))
      }
      this.formModal = false
      this.queryTable()
    },
    fail (msg) {
      this.formModal = false
      this.$Message.error(msg)
    },
    close () {
      this.formModal = false
    }
  }
}
</script>
